<template>

  <body class="back">
    <div class="back1">
      <div class="left">
        <div class="logo">TODOLIST后台</div>
        <div class="menu">
          <button class="AnNiu">
            用户列表
          </button>
        </div>
        <a-space>
          <a-button class="Button0" type="primary" @click="Out">登出</a-button>
        </a-space>
      </div>
      <div class="right">
        <a-table :columns="columns" :data="userList" />
      </div>
    </div>
  </body>
</template>
<script>
import {QueryUser} from '../request/index.js'
export default {
  name: "HomePage",
  components: {

  },
  data () {
    return {
      columns: [
        {
          title: 'uid',
          dataIndex: 'uid',
        },
        {
          title: '用户名',
          dataIndex: 'username',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '创建日期',
          dataIndex: 'createdAt',
        },
      ],
      userList: []
    }
  },
  methods:{
    send(){
      let that = this;
      console.log("getdaze")
      QueryUser().then(res=>{
        that.userList = res.data[0];
      })
    },
    Out(){
      localStorage.clear()
      this.$router.push('/login')
    }
  },
  created() {
    if(!localStorage.getItem('profile') || JSON.parse(localStorage.getItem('profile')).role !== 'admin')
    {
      this.$message.error('普通用户无权限查看后台, 请登录管理员账号')
      this.$router.push('/login')
    }
    else {
      this.send()
    }
  }
}

</script>
<style>
.right {
  position: relative;
  float: left;
  height: 556px;
  width: 773px;
  padding: 100px 0;
}
.AnNiu {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0;
  outline: none;
  position: relative;
  margin: 9px auto;
  display: block;
  cursor: pointer;
}
.menu {
  background-color: rgba(255, 255, 255);
  position: relative;
  padding: 30px 0;
  width: 200px;
  height: 25px;
}
.logo {
  position: relative;
  font-weight: 700;
  font-size: 20px;
  padding: 30px 25px;
  width: 200px;
  height: 50px;
}
.left {
  position: relative;
  float: left;
  height: 556px;
  width: 200px;
  background-color: rgb(255, 236, 236);
}
.back1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-size: cover;
  top: 50%;
  transform: translateY(-50%);
  width: 973px;
  height: 556px;
  background: linear-gradient(315deg, rgb(253, 234, 199), rgb(243, 203, 203));
  box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.back {
  background: linear-gradient(
    180deg,
    rgb(151, 113, 131) 30%,
    80%,
    rgb(255, 233, 233) 30%
  );
  position: relative;
  width: 100vw;
  height: 100vh;
}
.Button0{
  margin: 230px 70px;
}
</style>